import Image from 'next/image'

const blurDataURL =
  ''

export default function ResponsiveImage(props) {
  //? Props
  const { dimensions, className, src, alt, imageStyles, ...rest } = props

  //? Render(s)
  return (
    <div
      className={`relative ${dimensions ? dimensions : ''} ${className ? className : ''}`}
      title={alt}
    >
      <Image
        src={src}
        alt={alt}
        className={imageStyles}
        placeholder="blur"
        blurDataURL={blurDataURL}
        quality="100"
        fill
        {...rest}
      />
    </div>
  )
}
